import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {View, Navigator, Image, Text} from '@tarojs/components'
import {AtSearchBar} from 'taro-ui'
import {http} from '../../utils/http'
import {APPOINTMENT_SUB_PAGE, RESOURCE_URL} from '../../constants/api'
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import {vcmonitor} from "../../utils/tools";
import './list.scss'

export default class List extends Component {
  state: {
    loadMoreStatus: "more" | "loading" | "noMore"
    appointList: any
    searchKey: string
  } = {
    loadMoreStatus: 'loading',
    appointList: [],
    searchKey: '',
  }

  pkey = ''

  async UNSAFE_componentWillMount() {
    this.pkey = Taro.getCurrentInstance().router.params.pkeys || ''
  }

  async componentDidShow() {
    Taro.setNavigationBarTitle({title: '预约列表'})
    vcmonitor(this);
    this.page = 1
    const appointList = await this.getData(this.page)
    this.setState({appointList})
  }

  page = 1
  total = 0

  async getData(page) {
    const appointList = await http.get(APPOINTMENT_SUB_PAGE, {pkey: this.pkey, p: page, k: this.state.searchKey, lable_strs: Taro.getCurrentInstance().router.params.label || ''})
    if (appointList && appointList.length === 10) {
      this.setState({loadMoreStatus: 'more'})
    } else {
      this.setState({loadMoreStatus: 'noMore'})
    }
    return appointList || []
  }

  onReachBottom() {
    if (this.state.loadMoreStatus != 'noMore') {
      this.setState({loadMoreStatus: 'loading'}, async () => {
        this.page++
        const appointList = await this.getData(this.page)
        const old = this.state.appointList
        this.setState({appointList: [...old, ...appointList]})
      })
    }
  }

  inputChange(e) {
    const value = e
    if (!value) {
      this.setState({searchKey: ''}, async () => {
        await this.search()
      })
    }
    this.setState({searchKey: value})
  }

  async search() {
    this.page = 1
    this.setState({appointList: [], loadMoreStatus: 'loading'}, async () => {
      const appointList = await this.getData(this.page)
      this.setState({appointList})
    })
  }

  async clearSearch() {
    this.setState({searchKey: '', appointList: []})
    await this.search()
  }

  render() {
    const {loadMoreStatus, appointList, searchKey} = this.state
    return (
      <View className='appoint-list-root appoint-list-root-site'>
        <GzhAuth />
        <AtSearchBar
          value={searchKey}
          showActionButton
          placeholder='关键词/购买单价/产品编号'
          onActionClick={this.search.bind(this)}
          onConfirm={this.search.bind(this)}
          onClear={this.clearSearch.bind(this)}
          onChange={this.inputChange.bind(this)}
        />
        {appointList && appointList.length > 0 &&
        <View className='appoint-content'>
          {appointList.map(item => <Navigator key={item.uuid} className='appoint-content-items'
            url={`/other/appointment/order?itemId=${item.uuid || ''}`}
          >
            <View className='appoint-content-wrapper'>
              <View className='appoint-content-box'>
                <View className='items-left-name'>
                  {item.name}
                </View>
                <View className='items-right-price'>
                  <View className='right-price'><Text className='price-symbol'>￥</Text><Text className='right-truth-price'>{item.goods_price}</Text></View>
                  <View className='buying-price'>抢购价</View>
                </View>
              </View>
              <View className='appoint-content-box appoint-content-box-time'>
                <View className='items-left-time'>预约日期：{item.appointment_date_begin || ''}至{item.appointment_date_end || ''}</View>
                <View className='btn-box-wrapper'>
                  <View className='items-right-btn'>
                    预约
                  </View>
                </View>
              </View>
            </View>
          </Navigator>)}
        </View>
        }
        {appointList && appointList.length <= 0 && loadMoreStatus !== 'loading' &&
        <View className='listNull'>
          <Image src={`${RESOURCE_URL}/resources/images/shopnull.png`} mode='widthFix' />
          <View className='text'>什么都没有,去看看别的吧~</View>
        </View>
        }
      </View>
    )
  }
}
